import React from 'react';

import CommonList from '../../../components/CommonLists/list';
import HideOrShowText from '../../../components/HideOrShowText';
import CopyToClipboard from '../../../components/CopyToClipboard';
import { Tooltip, Button } from 'antd';

class ApplicationList extends CommonList {
  constructor(props) {
    super(props);
    this.api = 'application';
    this.delButton = false;
    this.tableParams = {
      rowKey: 'app_id',
      scroll: {
        x: 1400,
        y: 500
      }
    };
    this.editButton = record => {
      return (
        <Button size='small' type='link' onClick={this.edit.bind(this, record, { title: '编辑渠道' })}>
          编辑
        </Button>
      );
    };
    this.delButton = record => {
      return (
        <Button size='small' type='link' onClick={this.delete.bind(this, record)}>
          删除
        </Button>
      );
    };
    this.btnGroup = [this.editButton, this.delButton]; // 默认只有编辑、删除两个button, 扩展组件重写这个变量则可覆盖
    this.columns = [
      {
        title: '渠道名称',
        key: 'app_name',
        dataIndex: 'app_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className="overflowtext">
                <Button type='link' onClick={() => this.props.showDetail(record)}>
                  {text}
                </Button>
              </div>
            </Tooltip>
          );
        }
      },
      {
        title: 'AppKey',
        dataIndex: 'app_key',
        key: 'app_key',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {text}
              </div>
              <CopyToClipboard text={text}></CopyToClipboard>
            </Tooltip>
          );
        }
      },
      {
        title: 'AppSecret',
        dataIndex: 'app_secret',
        key: 'app_secret',
        ellipsis: true,
        render: (text, record) => {
          return (
            <div>
              <HideOrShowText text={text} needTooltip={true} needCopy={true} />
            </div>
          );
        }
      },
      {
        title: '描述',
        dataIndex: 'remark',
        key: 'remark',
        ellipsis: true,
        width: 200,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {text}
              </div>
            </Tooltip>
          );
        }
      },
      {
        title: '所属部门',
        dataIndex: 'dept_name',
        key: 'dept_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: '可见部门',
        key: 'dept_arr',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={record.dept_arr.name && record.dept_arr.name.join(',')} placement='topLeft'>
              {record.dept_arr.name && record.dept_arr.name.join(',')}
            </Tooltip>
          );
        }
      },
      {
        title: '创建/修改人',
        dataIndex: 'create_user_name',
        key: 'create_user_name',
        ellipsis: true,
        render: (text, record) => {
          var content = !!record.update_user_name
            ? `${record.create_user_name}/${record.update_user_name}`
            : `${record.create_user_name}/${record.create_user_name}`;
          return (
            <Tooltip title={content} placement='topLeft'>
              {content}
            </Tooltip>
          );
        }
      },
      {
        title: '修改时间',
        dataIndex: 'update_time',
        key: 'update_time',
        ellipsis: true,
        width: 150,
        render: (text, record) => {
          var content = !!record.update_time ? record.update_time : record.create_time;
          return (
            <Tooltip title={content} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {content}
              </div>
            </Tooltip>
          );
        }
      }
    ];
  }
  componentDidMount() { }

  // 删除时的参数
  getDeleteParam = record => {
    return { app_id: record.app_id };
  };
}

export default ApplicationList;
